<template>
    <div>
        <div class="index-wrap">
            <div class="index-left">
                <div class="index-left-block" style="background-color: #ffffff">
                    <div class="artwork-category-panel__category-title">
                        作品类别
                    </div>

                    <span class="allSpan">
                            <a @click="selectAllWorks()" style="cursor: pointer;color:#222222;text-decoration: none">
                        全部</a></span>
                    <span class="categoryName" v-for="category in categories">
                        <el-divider direction="vertical"></el-divider>
                    <a @click="selectWorkCategories(category)"
                       style="cursor: pointer;color:#222222;text-decoration: none">{{category.categoryName}}</a>
                </span>
                    <el-divider></el-divider>
                    <div v-for="category in categories">
                        <div class="workTitle">
                            {{category.categoryName}}
                            <br/><br/>
                        </div>
                        <span v-for="category2 in category.categories">
                        <el-tag @click="selectWorkCategories(category2)"
                                class="workItem">{{category2.categoryName}}</el-tag>
                    </span>
                        <el-divider></el-divider>
                    </div>

                </div>
            </div>
        </div>
        <div>
            <el-row class="swiper-painter-item">
                <el-card class="swiper-painter-cards" v-for="(workInfo,workId) in hotWorksInfo" :key="workId">
                    <button class="work-button" style="border: #ffffff" @click="workDetail(workInfo)">
                        <div v-if="workInfo.workFileType === 1">
                            <img class="image" :src="workInfo.workFilename"/>
                        </div>
                        <div v-else  @click="workDetail(work)">
                            <video :poster="workInfo.poster" :controls="true" class="video_fo"
                                   :src="workInfo.workFilename"></video>
                        </div>
                        <div class="work-div">
                            <span class="painter-item-name">
                                {{workInfo.workName}}
                            </span>
                        </div>
                        <div class="introduction-motto">
                            <span class="author-span">
                                <img class="work-user-img" :src="workInfo.userImg">
                                <span class="author-span">
                                    {{workInfo.username}}
                                </span>
                            </span>
                            <span class="star-span">
                                <i class="icon-favorites"></i>
                                {{workInfo.workLikesNums}}
                            </span>
                        </div>
                    </button>

                </el-card>

            </el-row>
        </div>
    </div>
</template>

<script>
    import {addWorkComment, getWorkComment, getWorkInfoById, selectHotWorks} from "../../assets/api/workInfoApi";
    import LeftNav from "../../components/LeftNav";
    import HeaderNav from "../../components/HeaderNav";
    import {selectCategories} from "../../assets/api/categoryApi";

    export default {
        data() {
            return {
                hotWorksInfo: [],
                centerDialogVisible: false,
                workImg: '',
                workInfo: {},
                comments: [],
                comment: '',
                categories: []
            }
        },
        methods: {
            selectAllWorks() {
                this.$router.push('/hotWork');
            },
            gotoUser(userId){
                this.$router.push({path:'/authorPage',query:{id:userId}});
            },
            selectHotWorksInfo() {
                let data = {};
                selectHotWorks(data).then((res) => {
                    this.hotWorksInfo = res.data.data;
                })
            },
            workDetail(work) {
                this.$router.push({path:'/workDetail',query:{id:work.workId}});
            },
            addComment(work) {
                let data = {};
                data.userId = localStorage.getItem("userId");
                data.workId = work.workId;
                data.content = this.comment;
                this.comment = '';
                addWorkComment(data).then((res) => {
                    if (res.code === 200) {
                        this.$message.success(res.message)
                    }

                })
            },
            showCategories() {
                selectCategories(this.data).then((res) => {
                    this.categories = res.data;
                })
            },
            selectWorkCategories(category) {
                this.$router.push({
                    path: '/hotWorkCategory',
                    query: {type: 'work_likes_nums', id: category.categoryId}
                });
            },
        },
        created() {
            this.selectHotWorksInfo();
            this.showCategories();
        },
    }
</script>

<style scoped>

    .video_fo {
        position: relative;
        width: 283px;
        height: 200px;
        left: -20px;
    }
    .index-wrap {
        width: 1200px;
        margin: 0 auto;
    }
    .index-left {
        float: left;
        text-align: left;
        font-size: 14px;
        color: #4a4a4a;
        margin-bottom: 15px;
    }
    .index-left-block {
        margin: 15px;
        width: 300px;
        box-shadow: 0 0 1px #ddd;
    }
    .workTitle {
        font-size: 12px;
        color: #9b9b9b;
        margin-left: 10px;
    }
    .artwork-category-panel__category-title {
        font-size: 14px;
        color: #4a4a4a;
        margin-bottom: 15px;
        font-weight: 700;
        margin-top: 10px;
    }
    .workItem {
        color: #222222;
        padding: 0px 10px;
        font-size: 12px;
        border: 1px solid #adb3fb;
        border-radius: 40px;
        margin: 5px 5px 5px 5px;
        transition: .5s;
        cursor: pointer;
    }
    .categoryName {
        font-size: 14px;
    }
    .allSpan {
        margin-left: 10px;
    }
    .swiper-painter-item {
        margin-left: 180px;
        overflow: hidden;
        padding: 0 12px;
        border-radius: 4px;
        display: flex;
        flex-wrap: wrap;
    }
    .swiper-painter-cards {
        margin-top: 15px;
        height: 400px;
        margin-left: 10px;
        width: 300px;
    }
    .painter-item-name {
        max-width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        align-items: center;
        font-size: 14px;
        color: #333;
        word-break: break-all;
        word-wrap: break-word;
        margin-left: -20px;

    }
    .introduction-motto {
        background-color: #ffffff;
        margin-top: 8px;
        font-size: 14px;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: justify;
        margin-left: -10px;
        text-justify: inter-ideograph;
    }
    .image {
        width: 100%;
        height: 250px;
        display: block;
        margin: 0 auto
    }
    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }
    .star-span {
        color: #adb3fb;
        float: right;
        background-color: #ffffff;
        margin-top: 20px;
        margin-right: 15px;
    }
    .author-span {
        color: #777;
        font-size: 14px;
        max-width: 154px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        background-color: #ffffff;
    }
    .work-user-img {
        width: 55px;
        height: 55px;
        border-radius: 100%;
    }
    .work-div {
        background-color: #ffffff;
        margin-top: 20px;
        margin-left: -30px;
    }
    .work-button {
        background-color: #ffffff;
        border: #fff;
        text-align: center;
    }
    a {
        text-decoration: none;
    }
</style>
